<template>
  <div>
    <el-card>
      <!-- <div slot="header" class="clearfix">
        <span style="font-size: 16px; font-weight: 600;">发表文章</span>
        <i class="el-icon-close" style="float: right; font-size: 24px;"></i>
      </div> -->
      <el-form ref="form"
        label-width="80px"
        :model="form"
        :rules="rules"
        >
        <el-form-item label="文章标题" prop="title" >
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="文章分类" prop="state">
          <el-select v-model="form.cate_name" placeholder="请选择分类">
              <el-option
                v-for="(item, index) in changeClass"
                :key="index"
                v-model="form.state"
                :label="item.cate_name"
                :value="item.cate_name">
               </el-option>
            </el-select>
        </el-form-item>
        <!-- 富文本编辑器 -->
        <el-form-item label="文章内容" prop="content">
          <quillEditor v-model="form.content" @blur="handleContent"></quillEditor>
        </el-form-item>
        <!-- 文章封面 -->
        <el-form-item label="文章封面" prop="cover_img">
          <!-- <el-input type="file"><i class="el-icon-plus"></i></el-input> -->
          <!-- <img class="articleCover" src="" alt=""> -->
          <UpdateImg text="请选择封面" v-model="form.cover_img"></UpdateImg>
          <p>
            <i class="el-icon-plus"></i>选择封面
          </p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">发布</el-button>
          <el-button>存为草稿</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import UpdateImg from '@/components/updateImg.vue'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { addArticle, getArticleClass } from '@/api/user'

export default {
  name: 'PublishArticle',
  components: {
    quillEditor, UpdateImg
  },
  data () {
    return {
      dialogVisible: false, // 弹出 发表文章 弹框
      form: {
        title: '',
        state: '',
        content: '',
        cover_img: ''
      },
      changeClass: [],
      // 非空校验
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        state: [{ required: true, message: '请选择分类', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
        cover_img: [{ required: true, message: '请选择封面', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 富文本编辑器失去焦点触发 非空校验
    handleContent () {
      this.$refs.form.validateField('content')
    },
    async initData () {
      // 获取文章分类
      const data = await getArticleClass({
        cate_name: this.form.cate_name,
        cate_alias: this.form.cate_alias
      })
      this.changeClass = data.data
      // console.log(data.data)
    },
    // 发布文章方法
    async submit () {
      try {
        const valid = await this.$refs.form.validate()
        if (valid) {
          // 发送请求
          const { title, cate_id, content, state, cover_img } = this.form
          await addArticle({ title, cate_id, content, state, cover_img })
          // 添加提示
          this.$message.success('发布成功')
          // 重新渲染

          // 关闭弹窗
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped lang="less">
 /deep/ .ql-editor{
  min-height: 100px;
}
</style>
